<template>
  <el-row class="tree-tool" style="width:100%" type="flex" justify="space-between">
    <!-- 根据组件的使用场景，定义标题的样式,渲染成“公司名称”的时候，标题加粗 -->
    <div :style="{fontWeight:isCompany?'bold':''}">{{ treeNode.name }}</div>
    <div class="manager">
      <span>{{ treeNode.manager }}</span>
      <el-dropdown>
        <span>
          操作
          <i class="el-icon-arrow-down" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-if="checkPermBtn('add-dept')" command="add" @click.native="addFn">添加子部门</el-dropdown-item>
          <el-dropdown-item v-show="checkPermBtn('edit-dept')" v-if="isCompany==false" command="edit" @click.native="editFn">编辑部门</el-dropdown-item>
          <el-dropdown-item v-show="checkPermBtn('del-dept')" v-if="isCompany==false" command="del" @click.native="delFn">删除部门</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-row>

</template>

<script>
export default {
  props: {
    treeNode: {
      type: Object, // 表示传入的数据必须是对象类型
      required: true// 表示必传
    },
    isCompany: {
      type: Boolean,
      default: true // 值true表示 此刻组件用于渲染公司名称
    }
  },
  methods: {
    test(val) {
      console.log(val)
    },
    editFn() {
      this.$emit('editEvent', this.treeNode.id)
    },
    addFn() {
      // 子传父 通知父组件 控制新增部门的弹窗显示
      // 并把当前点击的部门id传递给父组件
      this.$emit('addEvent', this.treeNode.id)
    },
    // 删除
    delFn() {
      // 子传父
      this.$emit('delEvent', this.treeNode.id)
    }
  }

}
</script>

<style lang="scss" scoped>
.tree-tool{
      line-height: 30px;
      .manager{
    span{
      margin-right: 15px;
    }
  }
    }
</style>
